<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/static/jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            var $p = $('#p');
            var $c = $('#c');
            $.get('/province.do',function (data) {
                console.log(data);
                data.forEach(function (ele) {
                    console.log(ele);
                    $p.append('<option value="'+ele.id+'">'+ele.name+'</option>')
                })
            });

            $p.change(function () {
                var pid = $(this).val();
                console.log(pid);
                $('#c').empty();
                if(pid > 0){
                    $c.append('<option value="-1">请选择</option>');
                    $.get('/city.do','pid='+pid,function (data) {
                        console.log(data);
                        data.forEach(function (ele) {
                            console.log(ele);
                            $c.append('<option value="'+ele.id+'">'+ele.name+'</option>')
                        })
                    })
                }

            })
        })
    </script>
</head>
<body>
    省份:<select id="p">
        <option value="-1">请选择</option>

    </select>
    城市:<select id="c">
        <option value="-1">请选择</option>
    </select>
</body>
</html>